---
title: Interactivity
description: How to make the UI elements interactive.
nav: 5
---

Every UI component can receive the same events as [any other R3F element](https://docs.pmnd.rs/react-three-fiber/api/events). In addition to these event listeners, uikit provides properties such as `hover` and `active` for all components. These properties allow the element to overwrite other properties if it is hovered or clicked.

The following example shows a Container element that is `black` by default turns `red` when the user hovers and is `green` as long as the user clicks on it.

```jsx
<Container
  backgroundColor="black"
  hover={{ backgroundColor: 'red' }}
  active={{ backgroundColor: 'green' }}
  sizeX={1}
  sizeY={1}
/>
```

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{
    '/App.tsx': `import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Container } from "@react-three/uikit";

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <OrbitControls />
      <Container
        backgroundColor="black"
        hover={{ backgroundColor: 'red' }}
        active={{ backgroundColor: 'green' }}
        sizeX={1}
        sizeY={1}
      />
    </Canvas>
  )
}`}}
/>
